<template>
    <div class="timing">
      <el-row style="margin-bottom:10px;">
        <el-col :span="24">
          <el-form :inline="true" :model="formInline" class="demo-form-inline queryFrom">
            <el-form-item label="服务名称">
              <el-input v-model="formInline.serveName" clearable placeholder="请输入服务对象名称" />
            </el-form-item>
            <el-form-item v-if="false" label="服务类型">
                <el-select v-model="formInline.serveType" clearable placeholder="">
                  <el-option 
                    v-for="(item,i) in subjectDirectoryTypeNumOptions"
                    :key="i"
                    :label="item.dataValue"
                    :value="item.dataValue"
                  />
                </el-select>
            </el-form-item>
            <el-form-item>
              <el-button plain @click="getUserList"><Icon type="ios-search" />查询</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <!-- 按钮 -->
      <el-row style="margin-bottom:10px;">
        <el-col :span="24">
          <el-button type="primary" @click="addUser('add')"><Icon type="md-add" />创建实时服务</el-button>
        </el-col>
      </el-row>
      <!-- 表格 -->
      <ykhttb ref="httbRef"
        width="180" 
        :btn-is-show="btnIsShow"
        :table-col="tabUserList" 
        :table-data="tableUserData"
        @getDataDetileInfo="getDataDetileInfo"
        @deleteSelectData="deleteSelectData" @refresh="getUserList" />
      <!-- 分页 -->
      <div style="text-align:right;margin-top:10px;">
        <el-pagination
          :current-page="page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
  
      <el-dialog :close-on-click-modal="false" :title="title" width="50%" :visible.sync="dialogTableVisible">
        <!-- 名称和路径必输 -->
        <el-form v-if="dialogTableVisible" ref="ruleForm" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm autoClass">
          <el-form-item label="服务名称" prop="serviceName">
            <el-input :disabled="disFlag"  v-model="ruleForm['serviceName']" clearable placeholder="" />
          </el-form-item>
          <el-form-item label="服务类型" prop="serviceType">
            <el-select :disabled="disFlag" @change="changeServiceName" v-model="ruleForm['serviceType']" clearable placeholder="请选择">
              <el-option 
                    v-for="(item,i) in subjectDirectoryTypeNumOptions"
                    :key="i"
                    :label="item.dataValue"
                    :value="item.dataValue"
                  />
            </el-select>
          </el-form-item>
          <el-form-item label="集群名称" prop="clusterName" v-if="ruleForm['serviceType']!='rabbitmq'">
            <el-select :disabled="disFlag" @change="setclusterName(ruleForm['clusterId'])"  v-model="ruleForm['clusterId']" clearable placeholder="请选择">
                  <el-option 
                    v-for="(item,i) in options1"
                    :key="i"
                    :label="item.clusterName"
                    :value="item.id"
                  />
                </el-select>
          </el-form-item>
          <el-form-item label="集群名称" prop="clusterName" v-if="ruleForm['serviceType']=='rabbitmq'">
            <el-select :disabled="disFlag" @change="setclusterName(ruleForm['clusterId'])"  v-model="ruleForm['clusterId']" clearable placeholder="请选择">
                  <el-option 
                    v-for="(item,i) in rabbitmqoptions"
                    :key="i"
                    :label="item.clusterName"
                    :value="item.id"
                  />
                </el-select>
          </el-form-item>
          <el-form-item label="接入任务" prop="taskId">
            <el-select :disabled="disFlag"  v-model="ruleForm['taskId']" @change="getName2(ruleForm['taskId'],entryList)" clearable placeholder="请选择">
              <el-option 
                v-for="(item,i) in entryList"
                :key="i"
                :label="item.comments"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="写入地址" prop="topicName">
            <el-input :disabled="disFlag"  v-model="ruleForm['topicName']" clearable placeholder="" />
          </el-form-item>
          <el-form-item label="数据模型" prop="modelId">
            <el-select :disabled="disFlag"  v-model="ruleForm['modelId']" @change="getName3(ruleForm['modelId'],selectDataList)" clearable placeholder="请选择">
              <el-option 
                v-for="(item,i) in selectDataList"
                :key="i"
                :label="item.dataModelName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="脱敏类型" prop="desType">
            <el-select :disabled="disFlag" @change="tmTypeFun(ruleForm['desType'])" v-model="ruleForm['desType']" clearable placeholder="请选择">
              <el-option 
                v-for="(item,i) in tmTypeOptions"
                :key="i"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
          <el-form-item v-if="ruleForm['desType']=='对象脱敏'" label="脱敏规则" prop="desId">
            <el-select :disabled="disFlag"  v-model="ruleForm['desId']"  clearable placeholder="请选择">
                  <el-option 
                    v-for="(item,i) in gzOptions"
                    :key="i"
                    :label="item.desensitizationName"
                    :value="item.id"
                  />
                </el-select>
          </el-form-item>
          <!-- 加脱敏规则字段------------------------------------------------------------------------------------------------------ -->
          <el-form-item label="状态" v-if="title!='新增'">
            <span v-if="ruleForm.status==0" style="background: rgb(211, 157, 157);padding:0px 6px;border-radius: 2px;display: inline-block; color: #fff;">停止</span>
            <span v-else style="background: rgb(51, 173, 71);padding:0px 6px;border-radius: 2px;display: inline-block; color: #fff;">启动</span>
          </el-form-item>
          <div v-if="ruleForm['desType']=='字段脱敏'" style="background: #eee;padding: 10px 10px 0 24px;" >
            <div class="autoClass" style="margin-bottom: 10px;" v-for="(optitem,index) in ofgzListOptions" :key="index">
              <div class="autoClass" style="flex-wrap: nowrap;width: 47%;">
                <label style="width:140px;text-align: right;padding-right: 20px;line-height: 35px;">字段名称</label>
                <el-select :disabled="disFlag" @change="filterTmGz(optitem)"  v-model="optitem['fieldName']" clearable placeholder="请选择">
                  <el-option 
                    v-for="(item,i) in zdOptions"
                    :key="i"
                    :label="item.fieldName"
                    :value="item.fieldName"
                  />
                </el-select>
              </div>
              <div class="autoClass" style="flex-wrap: nowrap;width: 47%;">
                <label style="width:140px;text-align: right;padding-right: 20px;line-height: 35px;">脱敏规则</label>
                <el-select :disabled="disFlag"  @change="setdesensitizationRuleTypeName(optitem)"  v-model="optitem['desId']"  clearable placeholder="请选择">
                  <el-option 
                    v-for="(item,i) in optitem.gzOptions"
                    :key="i"
                    :label="item.desensitizationName"
                    :value="item.id"
                  />
                </el-select>
              </div>
              <div  style="width: 6;margin-left: 10px;">
                <el-button v-if="index==0" @click="addgzListOptions('add')" type="primary" icon="el-icon-plus" circle></el-button>
                <el-button v-else @click="addgzListOptions(index)" type="warning" icon="el-icon-minus" circle></el-button>
              </div>
          </div>
        </div>
          
        </el-form>
        <div style="text-align: center;margin-top: 20px;" v-if="!disFlag">
          <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
          <el-button @click="resetForm('return')">返回</el-button>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import { dataServepage, dataServesave,clusterpage,dicqueryList,
    dataServedelete,clusterlist,topicTaskpage,desensitizationrulegetRuleListByDataModelId,
    dataModeldatagetList } from '@/api/zt/index'
  import experiment from '@/mixins/experiment'
  import request from '@/utils/request'
  export default {
    components: {
    },
    mixins: [experiment],
    data() {
      return {
        rabbitmqoptions:[],
        options1:[],
        gzOptions:[],
        zdOptions:[],
        ofgzListOptions:[
          {
            "fieldName":"",
            "desId":"",
            "desensitizationRuleTypeName":"",
            "gzOptions":[]
          }
        ],
        tmTypeOptions:['字段脱敏','对象脱敏'],
        entryList:[],
        subjectDirectoryTypeNumOptions:[],
        btnIsShow: {
          operate: true,
          detile: false,
          del: true
        },
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        title: '新增',
        rules: {
          serviceName:[
            { required: true, message: '请输入服务名称', trigger: 'change' }
          ],
          serviceType:[
            { required: true, message: '请选择服务类型', trigger: 'change' }
          ],
          clusterId:[
            { required: true, message: '请选择集群名称', trigger: 'change' }
          ],
          topicName:[
            { required: true, message: '请输入主题名称', trigger: 'change' }
          ],
          taskId:[
            { required: true, message: '请选择接入任务', trigger: 'change' }
          ],
          modelId:[
            { required: true, message: '请选择数据模型', trigger: 'change' }
          ]
        },
        dialogTableVisible: false,
        ruleForm: {
          "desId":"",
          "clusterId":'',
          "clusterName":'',
          "desType":'',
          "createTime": "",
          "id": 0,
          "modelId": 0,
          "modelName": "",
          "serviceName": "",
          "serviceType": "",
          "spare1": "",
          "spare2": "",
          "status": 0,
          "taskId": 0,
          "taskName": "",
          "topicId": 0,
          "topicName": "",
          "updateTime": ""
        },
        userId: '',
        allOptions:null,
        formInline: {
          'serveName': '',
          'serveType':''
        },
        tableUserData: [],
        nsList:[],
        tabUserList: [
          {
            key: 'serviceName',
            title: '服务名称'
          },
          {
            key: 'serviceType',
            title: '服务类型'
          },
          {
            key: 'topicName',
            title: '主题'
          },
          {
            key: 'modelName',
            title: '数据模型'
          },
          {
            key: 'taskName',
            title: '接入任务'
          },
          {
            key: 'status',//0停止 1启动
            title: '状态'
          },
          {
            key: 'createTime',
            title: '创建时间'
          }
        ],
        selectDataList: [],
        total: 0,
        size: 10,
        page: 1
      }
    },
    mounted() {
      this.$nextTick(() => {

        request({
            url: '/ht-datacenter/rabbit/getRabbitMqList',
            method: 'post',
            data:{
                "page":1,
                "limit":1000
            }
          }).then(res => {
            if (res.code == 200) {
              this.rabbitmqoptions = res.data.records
            } else {}
          })



        this.getUserList()
        this.getcodequery('subjectDirectoryType')

        dicqueryList({}).then(res => {
            if (res.code == 200) {
               this.subjectDirectoryTypeNumOptions = res.data
            }
        })
        topicTaskpage({
          'pageIndex': 1,
          'dataModelName':'',
          'dataModelTypeId': '',
          'pageSize': 1000
        }).then(res => {
          this.entryList = res.data.records
        })

        dataModeldatagetList({
          'pageIndex': 1,
          'dataModelName':'',
          'dataModelTypeId':'',
          'pageSize':1000
        }).then(res => {
          this.selectDataList = res.data.records
        })

        clusterpage({
          'pageIndex':1,
          'pageSize':1000,
          'sk_like_clusterName':''
        }).then(res => {
          this.options1 = res.data.records
        })

      })
    },
    methods: {
      changeServiceName(){
        this.ruleForm['clusterId'] = ''
        // if(this.ruleForm['serviceType']=='rabbitmq'){
        //   this.ruleForm['clusterId'] = ''
        // }
      },
      setclusterName(v){
        this.options1.forEach((item,index)=>{
          if(item.id==v){
            this.ruleForm.clusterName = item.clusterName
          }
        })
      },
      setdesData(v){
        v.forEach((item,index)=>{
          item.gzOptions = this.allOptions[item['fieldName']]
        })
        this.ofgzListOptions = JSON.parse(JSON.stringify(v))
      },
      setdesensitizationRuleTypeName(v){
        v.gzOptions.forEach((item,index)=>{
          if(v['desId']==item.id){
            v.desensitizationRuleTypeName = item.desensitizationRuleTypeName
          }
        })
      },
      filterTmGz(v){
        v['desId'] = ''
        v.gzOptions = this.allOptions[v['fieldName']]
      },
      tmTypeFun(v){
        if(v=='字段脱敏'&& this.ruleForm['modelId']){
          this.queryTmGz(false)
        }
        if(v=='对象脱敏'&&this.ruleForm['modelId']){
          this.queryTmGz(true)
        }
      },
      getName3(v,list){
          this.zdOptions = []
          this.gzOptions = []//del
          list.forEach((item,index)=>{
            if(v==item.id){
              this.ruleForm['modelName'] = item.dataModelTypeName
              this.zdOptions = item.fields
            }
          })
          this.ofgzListOptions.forEach((item,index)=>{
              item.fieldName = ''
              item.desId = ''
              item.gzOptions = []
          })


          if(v){
            if(this.ruleForm['desType']){
              this.tmTypeFun(this.ruleForm['desType'])
            }else{
              this.queryTmGz(true)
            }
          }else{
            // this.gzOptions = []
          }
        },
      queryTmGz(v,data){
        if(!this.ruleForm['modelId']){
          return
        }
        desensitizationrulegetRuleListByDataModelId({
          "desensitizationObj":v,
          "dataModelId": this.ruleForm['modelId']
        }).then(res=>{
          this.gzOptions = res.data['obj']
          this.allOptions =  res.data
          if(data){
           this.setdesData(data)
          }
        })
      },
      addgzListOptions(v){
        if(v=='add'){
          this.ofgzListOptions.push(
            {
              "fieldName":"",
              "desId":"",
              "desensitizationRuleTypeName":"",
              "gzOptions":[]
            }
          )
        }else{
          this.ofgzListOptions.splice(v,1)
        }
      },
      getName2(v,list){
        list.forEach((item,index)=>{
          if(v==item.id){
            this.ruleForm['taskName'] = item.comments
          }
        })
      },
     
      deleteSelectData(v) {
        const ids =  [v.id]  //文档里面没有参数说明
        dataServedelete(ids).then(res => {
          if (res.code == 200) {
            this.getUserList()
          } else {
            this.errorDialog(res.msg)
          }
        })
      },
      handleNodeClick(data) { },
      verifyRequired(){
        let flag =true;
        this.nsList = []

        if(this.ofgzListOptions.length==1){
          if(!this.ofgzListOptions[0].fieldName && !this.ofgzListOptions[0].desId){
            this.ruleForm.qualityRule = null
            flag = true
          }else if(this.ofgzListOptions[0].fieldName && this.ofgzListOptions[0].desId){
            this.ruleForm.qualityRule = JSON.stringify(this.ofgzListOptions)
            flag = true
          }else{
            flag = false
            this.$message.error(`请把第1条信息填写完整`)
          }
        }else{
          this.ofgzListOptions.forEach((item,index)=>{
            if((!item.fieldName&&item.desId)||(item.fieldName&&!item.desId)){
              flag = false
              this.$message.error(`请把第${index+1}条信息填写完整`)
            }else if(item.fieldName&&item.desId){
              this.nsList.push({
                fieldName:item.fieldName,
                desId:item.desId
              })
            }
          })
          this.ruleForm.desData = JSON.stringify(this.nsList)
        }
        return flag;
      },
      commitFromData() {
        this.ofgzListOptions.forEach((item,index)=>{
          delete item.gzOptions
        })
        this.ruleForm.desData = JSON.stringify(this.ofgzListOptions)
           // 验证规则字段必填项start
        // if(!this.verifyRequired()){
        //   return
        // }
        dataServesave(this.ruleForm).then(res => {
            if (res.code == 200) {
              this.getUserList()
            } else {
              this.errorDialog(res.msg)
            }
          })
      },
      handleSizeChange(v) {
        this.page = 1
        this.size = v
        this.getUserList()
      },
      handleCurrentChange(v) {
        this.page = v
        this.getUserList()
      },
  
      // 获取用户列表
      getUserList() {
        this.dialogTableVisible = false
        this.$refs.httbRef.isShowLoading(true)
        dataServepage({
          'pageIndex': this.page,
          'pageSize': this.size,
          'or_orderby_createTime':'dsc',
          "sk_like_serviceName":this.formInline.serveName,
          "sk_like_clusterName":this.formInline.serveType,
        }).then(res => {
          this.tableUserData = res.data.records
          this.total = res.data.total
          this.$refs.httbRef.isShowLoading(false)
        })
      }
    }
  }
  </script>
  
<style lang="scss" scoped>
>>>.jsoneditor-poweredBy {
  display: none !important;
}

.addPs{
  display: flex;
  flex-direction: row;
  margin-bottom: 10px;
  >div{
    width:50%
  }
  span{
    display: inline-block;
    width: 10%;
  }
}
.autoClass{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.autoClass .el-form-item{
  width:50%;
}
.addcs{
  display: flex;
  flex-direction: row;
  margin-bottom: 10px;
}
.addcs2 .el-select {
  display: inline-block;
  width: 240px;
}
.autoInput{
  display: inline-block;
  width: 70%;
}
.infoTitle{
  border-bottom:1px solid #e5e5e5;
  margin-bottom: 30px;
  position: relative;
}
.infoTitle>span{
  position: absolute;
  left: 20px;
  background: #fff;
  width:80px;
  top:-15px;
  height:30px;
  text-align: center;
  line-height: 30px;
}
  .el-select{
      width:100%;
  }
  .timing{
    background:#fff;
    padding:20px;
  }
</style>
  